<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-v-for的CRUD案例</title>
    <!--导入vue资源文件-->
    <script src="../js/vue.js"></script>
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <p>
        <input type="number" placeholder="编号" style="width: 50px" v-model="newUser.id">
        <input type="text" placeholder="姓名" style="width: 100px" v-model="newUser.name">
        <input type="text" placeholder="地址" style="width: 150px" v-model="newUser.address">
        <select v-model="newUser.sex">
            <option value="1">男</option>
            <option value="0">女</option>
        </select>
        <button @click="addUser()">添加</button>
        <input type="text" placeholder="姓名" v-model="searchName">
        <button v-on:click="search()">搜索</button>
    </p>
    <hr>
    <p>
    <table border="1" cellspacing="0" width="100%" cellpadding="0">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>地址</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr align="center" v-for="(item,index) in userList">
            <td>{{item.id}}</td>
            <td v-text="item.name"></td>
            <td>{{item.address}}</td>
            <td>{{item.sex == 1 ? "男" : "女"}}</td>
            <td>
                <button @click="update()">修改</button>
                <button @click="deleteUser(index)">删除</button>
            </td>
        </tr>
    </table>
    </p>
    <p>
        <input type="number"  placeholder="编号" style="width: 50px" v-model="updateUser.id">
        <input type="text" placeholder="姓名" style="width: 100px" v-model="updateUser.name">
        <input type="text" placeholder="地址" style="width: 150px" v-model="updateUser.address">
        <select v-model="updateUser.sex">
            <option value="1">男</option>
            <option value="0">女</option>
        </select>
        <button @click="updateMth()">修改</button>
    </p>
</div>
<script>
    // 2. 定义一个Vue对象
    let vm = new Vue({
        el: "#app",
        data: {
            userList: [
                {id: 1, name: "小明", address: "武汉", sex: 1},
                {id: 2, name: "小红", address: "东莞", sex: 0},
                {id: 3, name: "小芳", address: "佛山", sex: 0},
                {id: 4, name: "小丽", address: "深圳", sex: 0},
            ],
            newUser:{
                id:undefined,
                name:undefined,
                address:undefined,
                sex:undefined,
            },
            searchName : undefined,
            updateUser:{
                id:undefined,
                name:undefined,
                address:undefined,
                sex:undefined,
            }
        },
        methods:{
            addUser:function () {
                let flag = false;
                for (let item in this.userList) {
                    if(this.userList[item].id == this.newUser.id){
                        flag = true;
                        break;
                    }
                }
                if(flag == false){
                    // 将newUser对象添加到 userList的最后
                    this.userList.push(this.newUser);
                }
            },
            search:function () {
                this.userList = [
                    {id: 1, name: "小明", address: "武汉", sex: 1},
                    {id: 2, name: "小红", address: "东莞", sex: 0},
                    {id: 3, name: "小芳", address: "佛山", sex: 0},
                    {id: 4, name: "小丽", address: "深圳", sex: 0},
                ];
                this.userList = this.userList.filter(item =>{
                    return item.name.indexOf(this.searchName) !== -1;
                });
            },
            update:function () {
                // 1. 获取到点击修改的这一行tr
                let trEle = event.target.parentNode.parentNode;
                // 2. 获取到这一行的id
                let id = trEle.children[0].innerText;
                // 3. 遍历数组
                for (let index in this.userList) {
                    let item = this.userList[index];
                    if(item.id == id){
                        item.name = "蔡徐坤";
                        item.address = "北京";
                        item.sex = 1;
                    }
                }
            },
            deleteUser:function (index) {
                this.userList.splice(index,1);
            },

            updateMth:function () {
                for (let index in this.userList) {
                    // 获取数组中每一个元素
                    let item = this.userList[index];
                    // 判断
                    if(item.id == this.updateUser.id){
                        item.name = this.updateUser.name;
                        item.address = this.updateUser.address;
                        item.sex = this.updateUser.sex;
                    }
                }
            }
        }
    });
</script>
</body>
</html>